/**
 * @description 非标债券投资要求
 * @author zls
 */
import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message } from 'antd';
import { IconC, InputNumberC } from '@/src/comps';

@Form.create()
class cards extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: [],
      showInput: false,
      value: 1,
    };
  }
  onClick = () => {
    if (this.state.value == 0) {
      message.info(`${this.props.name}不能为0`);
      return;
    }
    this.setState({ showInput: false });
    this.props.onClick(this.state.value);
  };
  onChange = (e) => {
    console.log(e, '--');
    this.setState({ value: e });
  };
  getContent = (value, unit) => {
    if (value) {
      if (unit == '元') {
        return (value / 1).toFixed(2);
      }
      if (unit == '亿') {
        return (value / 100000000).toFixed(2);
      }
      return value;
    }

    return '--';
  };

  render() {
    const { bgurl, name, content, isEdit = false, unit } = this.props;

    return (
      <div style={{ backgroundImage: `url(${bgurl})`, textAlign: 'center', height: '60px', lineHeight: '60px' }}>
        <span style={{ marginRight: '20px', verticalAlign: 'middle' }}>{name}</span>
        {this.state.showInput ? (
          <>
            {' '}
            <div style={{ width: '200px', display: 'inline-block', verticalAlign: 'middle' }}>
              <InputNumberC form={this.props.form} dataIndex='number' splitStyle={true} unit={'元'} precision={2} initialValue={content} onChange={this.onChange} />
            </div>
            <a
              style={{ marginLeft: '20px' }}
              onClick={() => {
                this.onClick();
              }}
            >
              保存
            </a>
            <a style={{ marginLeft: '20px' }} onClick={() => this.setState({ showInput: false })}>
              取消
            </a>
          </>
        ) : (
          <>
            <span style={{ fontWeight: 500, fontSize: '18px', verticalAlign: 'middle' }}>
              {this.getContent(content, unit)}
              {unit}
            </span>
            {isEdit && (
              <IconC
                type='edit'
                style={{ marginLeft: '12px' }}
                onClick={() => {
                  this.setState({ value: content });
                  this.setState({ showInput: true });
                }}
              ></IconC>
            )}
          </>
        )}
      </div>
    );
  }
}
export default cards;
